<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>分享到</title>
   <style>           
         #div1{width:150px;height:200px;background:green;position:absolute;left:-150px;}
		 #div1 span{position:absolute;width:20px;height:60px;line-height:20px;background:blue;right:-20px;top:70px;}
   </style>
   <script>
      window.onload=function(){
	      var oDiv=document.getElementById("div1");
		  alert(oDiv.offsetLeft);
	      oDiv.onmouseover=function(){
		    startMove(0);
		  };
		  oDiv.onmouseout=function(){
		    startMove(-150);
		  };	  
	  };
	  var timer=null;
      function startMove(iTarget){
	    var oDiv=document.getElementById("div1");
		clearInterval(timer);//将以前开过的定时器关闭
	    timer=setInterval(function(){
		   var speed=0;
		   if(oDiv.offsetLeft>iTarget){
		     speed=-10;	   
		   }else{
		     speed=10;	   
		   }
		   //
		   if(oDiv.offsetLeft==iTarget){
		      clearInterval(timer);
		   }else{
		      oDiv.style.left=oDiv.offsetLeft+speed+"px";
		   }
		},30);
	  }
   </script>
</head>
<body>
    <div id="div1">
	   <span>分享到</span>
    </div>


</body>
</html>